<template>
	<view class="custom-range-slider">
		<!-- 显示当前范围 -->
		<view class="range-display">
			{{ currentMin }} - {{ currentMax }} 岁
		</view>

		<!-- 滑动轨道容器 -->
		<view class="track-container" @tap="onTrackTap">
			<view class="track-bg"></view>
			<view
				class="track-selected"
				:style="{
					left: `${((currentMin - min) / (max - min)) * 100}%`,
					width: `${((currentMax - currentMin) / (max - min)) * 100}%`
				}"
			></view>

			<view
				class="thumb thumb-left"
				:style="{ left: `${((currentMin - min) / (max - min)) * 100}%` }"
				@touchstart="startDrag('min')"
				@touchmove="onTouchMove"
				@touchend="endDrag"
			>
				<view class="thumb-inner"></view>
			</view>

			<view
				class="thumb thumb-right"
				:style="{ left: `${((currentMax - min) / (max - min)) * 100}%` }"
				@touchstart="startDrag('max')"
				@touchmove="onTouchMove"
				@touchend="endDrag"
			>
				<view class="thumb-inner"></view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'CustomRangeSlider',
	props: {
		value: {
			type: Array,
			default: () => [3, 18]
		},
		min: {
			type: Number,
			default: 3 // 这是范围的最小边界（不可滑出）
		},
		max: {
			type: Number,
			default: 18 // 这是范围的最大边界
		},
		step: {
			type: Number,
			default: 1
		}
	},
	computed: {
		// 从 value 中取出当前滑块值
		currentMin() {
			return this.value[0] ?? this.min;
		},
		currentMax() {
			return this.value[1] ?? this.max;
		}
	},
	methods: {
		startDrag(type) {
			this.dragging = type;
		},

		onTouchMove(e) {
			if (!this.dragging) return;

			const touch = e.touches[0];
			const rect = uni.createSelectorQuery().in(this).select('.track-container').boundingClientRect();
			rect.exec((res) => {
				if (!res || !res[0]) return;
				const container = res[0];
				const offsetX = touch.clientX - container.left;
				const percent = Math.max(0, Math.min(1, offsetX / container.width));
				let value = this.min + percent * (this.max - this.min);

				// 处理 step（四舍五入到最近的 step 倍数）
				if (this.step > 0) {
					value = Math.round(value / this.step) * this.step;
				}
				value = Math.max(this.min, Math.min(this.max, value)); // 边界限制

				if (this.dragging === 'min') {
					this.$emit('input', [Math.min(value, this.currentMax), this.currentMax]);
				} else if (this.dragging === 'max') {
					this.$emit('input', [this.currentMin, Math.max(value, this.currentMin)]);
				}
			});
		},

		endDrag() {
			this.dragging = null;
		},

		onTrackTap(e) {
			const rect = uni.createSelectorQuery().in(this).select('.track-container').boundingClientRect();
			rect.exec((res) => {
				if (!res || !res[0]) return;
				const container = res[0];
				const offsetX = e.detail.x - container.left;
				const percent = Math.max(0, Math.min(1, offsetX / container.width));
				let value = this.min + percent * (this.max - this.min);

				if (this.step > 0) {
					value = Math.round(value / this.step) * this.step;
				}
				value = Math.max(this.min, Math.min(this.max, value));

				const mid = (this.currentMin + this.currentMax) / 2;
				if (value <= mid) {
					this.$emit('input', [value, this.currentMax]);
				} else {
					this.$emit('input', [this.currentMin, value]);
				}
			});
		}
	}
};
</script>

<style scoped>
.custom-range-slider {
	width: 100%;
	padding: 20rpx 0;
}

.range-display {
	text-align: center;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	font-weight: bold;
}

.track-container {
	position: relative;
	height: 40rpx;
	width: 100%;
}

.track-bg {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 8rpx;
	background-color: #e0e0e0;
	border-radius: 4rpx;
	transform: translateY(-50%);
}

.track-selected {
	position: absolute;
	top: 50%;
	height: 8rpx;
	background-color: #e65c00;
	border-radius: 4rpx;
	transform: translateY(-50%);
}

.thumb {
	position: absolute;
	top: 40%;
	width: 20rpx;
	height: 20rpx;
	transform: translate(-50%, -50%);
	z-index: 10;
}

.thumb-inner {
	width: 100%;
	height: 100%;
	background-color: #fff;
	border: 4rpx solid #e65c00;
	border-radius: 50%;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);
}
</style>